import React from 'react'
import {TreeSelect} from '../../antd'
import Http from "../utils/http"

const SHOW_CHILD = TreeSelect.SHOW_CHILD;
const TREE_DATA = [];

const SHOP_GROUP = [];
const SHOP = [];


const generateList = (data) => {
    for (let i = 0; i < data.length; i++) {
        const node = data[i];
        node.value = node.key;
        if (node.children) {
            generateList(node.children, node.key);
        }
    }
};

const generateTreeList = (data) => {
    for(let i = 0; i < data.length; i++){
        const node = data[i];
        if(node.children){
            const node_2 = node.children;
            if(node_2){
                for(let j = 0; j < node_2.length ; j++ ){
                    const obj = {};
                    const arr = [];

                    obj.value = node_2[j].value;
                    node_2[j].children.map(d => {arr.push(d.value); SHOP.push(d.value)});
                    obj.children = arr;

                    SHOP_GROUP.push(node_2[j].value);
                    TREE_DATA.push(obj);
                }
            }
        }
    }
};

const getSubNodeList = (key) =>{
    for(let i = 0 ; i < TREE_DATA.length ; i++){
        const obj = TREE_DATA[i];
        if(obj.value === key){
            return obj.children;
        }
    }
};



class RegionShopTreeSelect extends React.Component {
    state = {
        treeData: [],
        value: [],
        searchValue:''
    };


    isEmpty = (val) => {
        if (typeof val !== "undefined" && val !== null) {
            return val.length === 0;
        }
        return true;
    };

    isChina = (val) => {
        if(/.*[\u4e00-\u9fa5]+.*$/.test(val)){
            return false;
        }
        return true;
    };

    handleOnSearch = (value) => {
        this.setState({
            searchValue:value
        });
        const isChina = this.isChina(value);
        if(value && value.length === 4 && isChina){
            console.log(value);
            const val = this.state.value;
            if(SHOP_GROUP.indexOf(value) > -1){
                const shopList = getSubNodeList(value);
                if(shopList){
                    shopList.map(d => val.push(d));
                }

            }else if (SHOP.indexOf(value) > -1){
                val.push(value);
            }
            this.setState({
                searchValue:''
            });

            this.handleChange([...val]);
        }

        if(value && value.length > 4 && isChina){
            const val = this.state.value;
            let shopCodes = [];
            if (value.indexOf(",") !== -1) {
                shopCodes = value.trim().split(",");
            }else if(value.indexOf(" ") !== -1){
                shopCodes = value.trim().split(" ");
            }
            shopCodes.map(code => {
                if(SHOP.indexOf(code) > -1){
                    val.push(code);
                }
            });
            this.setState({
                searchValue:''
            });
            this.handleChange([...val]);
        }
    };



    handleChange = (value) => {
        this.setState({
            value:value
        });
        const onChange = this.props.onChange;
        if (onChange) {
            onChange(value);
        }
    };



    componentDidMount() {
        this.setState({fetching: true});
        Http.post({
            url: `${API_URL}mms-osm-center/tree/regionshopgrouptreeselect`,
            params : {auth : this.props.auth ? this.props.auth : false}
        })
            .then(rs => {
                const rsData = rs.data;
                generateList(rsData);
                generateTreeList(rsData);
                this.setState({treeData : rsData});
            })
            .catch((error) => {

            });
    }

    reset = () => {
        this.setState({
            value: []
        });
    };


    render() {
        const {treeData,value,searchValue,treeExpandedKeys} = this.state;

        return <TreeSelect
                    value={value}
                    dropdownStyle={this.props.dropdownStyle ? this.props.dropdownStyle
                        : {maxWidth : 500, maxHeight:500,overflowY: scroll}}
                    treeData={treeData}
                    treeCheckable={true}
                    placeholder='请选择'
                    showCheckedStrategy= {SHOW_CHILD}
                    onChange={this.handleChange}
                    allowClear={true}
                    maxTagCount={this.props.maxTagCount ? this.props.maxTagCount : 10}
                    treeNodeFilterProp='title'
                    onSearch={this.handleOnSearch}
                    searchValue={searchValue}
                    treeNodeLabelProp="value"
        />;
    }
}

export default RegionShopTreeSelect;